<template>
	<view class="search page bgf5 ">
		<!-- <view class="flex flexC py10">
			<view class="bor57 flex1 r40 flex flexC px15 pb3 ml10 ">
				<image class="sear" src="/static/img/icon/search.png" mode="aspectFill"></image>
				<input class="pl8 flex1 fs12 input" v-model="keyword" confirm-type="search" type="text"
					placeholder="请输入搜索关键词">
			</view>
			<text class="bgf6c  r40 px14 py4 ml10 mr10" @click="clickSearch">搜索</text>
		</view> -->

		<!-- tab栏 -->
		<view v-if="!fixedClass" class="tabbox bgf6 c66 fs14 px12 pb16 pt6 flex flexC">
			<view v-for="(item,index) in tabs" class="item pr20 py6" :key="index">
				<text :class="tabIndex == index ? 'active' : ''">{{item.name}}</text>
				<image v-if="tabIndex == index" class="icon" src="/static/img/icon/sel.png" mode="widthFix"></image>
			</view>
		</view>
		<scroll-view class="list" @scrolltolower="nextPage" scroll-y >

			<block v-for="(item,index) in list" :key="index">
				<store-item :item="item" :index="index" @location="location" @call="call" @detail="detail"></store-item>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				page: 1,
				list: [],
				isLastPage: false,
				isnodata: false,
				tabs: [{
						name: '台球'
					},
					{
						name: '棋牌'
					}, {
						name: 'KTV/影吧'
					}
				],
				tabIndex: 0,
			};
		},
		onLoad() {
			this.search();
		},
		methods: {

			clickSearch() {
				this.isLastPage = false;
				this.isnodata = false;
				this.page = 1;
				this.list = [];
				this.search();
			},

			location(item) {
				uni.openLocation({
						name: item.name,
						latitude: parseFloat(item.lat),
						longitude: parseFloat(item.lng),
						address: item.address,
						fail: function(res) {
							console.info(JSON.stringify(res))
						}
					},

				)
				console.log("location" + JSON.stringify(item))
			},
			call(item) {

				uni.makePhoneCall({
					phoneNumber: item.tel
				})
				console.log("call" + JSON.stringify(item))

			},

			detail(item) {
				console.log("detail" + JSON.stringify(item))
				uni.navigateTo({
					url: '../shop/detail?id=' + item.id + "&distance=" + item.distance
				})
			},

			nextPage() {
				if (this.isLastPage) return;
				this.page += 1;
				this.search();
			},


			search() {

				let that = this;

				let param = {
					lat: uni.getStorageSync("lat"),
					lng: uni.getStorageSync("lng"),
					keyword: this.keyword,
					page: this.page,
					orgId: uni.getStorageSync("orgId")

				};

				this.$api.getShop(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						console.log(that.list)
						if (length < 10) {
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		.list {
			height: calc(100vh - 108rpx);
		}
		.sear {
			width: 22rpx;
			height: 22rpx;
		}

		.input {
			color: #000
		}

		.tabbox {
			.item {
				position: relative;

				.active {
					color: #1A1B20;
					font-weight: 600;
				}

				&::after {
					content: '';
					width: 2rpx;
					height: 26rpx;
					background-color: #CFCFCF;
					position: absolute;
					top: calc(50% - 12rpx);
					right: 24rpx;
				}

				&:last-child {
					&::after {
						display: none;
					}
				}

				.icon {
					width: 38rpx;
					height: 10rpx;
					position: absolute;
					bottom: -0rpx;
					left: calc(50% - 13rpx - 28rpx);
				}
			}

			.img {
				width: 236rpx;
			}

			.img2 {
				width: 306rpx;
			}
		}
	}
</style>